<template>
  <div  class="dashboard-editor-container">
    <el-row style="background: #fff; padding: 16px 16px; margin-bottom: 32px">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <!-- <el-tab-pane key="全局配置" label="全局配置" name="全局配置" lazy>
          <globalConfiguration ref="全局配置"></globalConfiguration>
        </el-tab-pane> -->
        <el-tab-pane key="网络准入" label="网络准入" name="网络准入" lazy>
          <networkAccess ref="网络准入"></networkAccess>
        </el-tab-pane>
        <el-tab-pane key="网络准出" label="网络准出" name="网络准出" lazy>
          <onlineRelease ref="网络准出"></onlineRelease>
        </el-tab-pane>
        <el-tab-pane key="进程外联" label="进程外联" name="进程外联" lazy>
          <processExternalConnection ref="进程外联"></processExternalConnection>
        </el-tab-pane>
        <el-tab-pane key="端口审计" label="端口审计" name="端口审计" lazy>
          <openPort ref="端口审计"></openPort>
        </el-tab-pane>
        <el-tab-pane key="非法网卡" label="非法网卡" name="非法网卡" lazy>
          <illegalNetworkCard ref="非法网卡"></illegalNetworkCard>
        </el-tab-pane>
      </el-tabs>
    </el-row>
  </div>
</template>
<script>
import globalConfiguration from './globalConfiguration'
import networkAccess from './networkAccess'
import onlineRelease from './onlineRelease'
import processExternalConnection from './processExternalConnection'
import openPort from './openPort'
import  illegalNetworkCard  from './illegalNetworkCard.vue'
export default {
  components: { globalConfiguration, networkAccess, onlineRelease, processExternalConnection, openPort, illegalNetworkCard },
data() {
  return {
    activeName: '网络准入',
  }
},
  //生命周期 - 创建完成（访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
  },
  methods: {
    handleClick(item){
      this.$nextTick(() => {
        this.$refs[item.name].getData()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
@import "~@/styles/variables.scss";

</style>